import { Col, Form, Select, theme } from "antd";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { Modal, Row, Input, App } from "antd";
import { FormattedMessage, useIntl } from "react-intl";
import { LibAppView } from "../../../../lib";
import Api from "../../Api";

interface IEditProps {
    open: boolean;
    data?: any;
    moduleList: any[];
    onClose: (success?: boolean) => void;
}

export const Edit = LibAppView.withService<IEditProps>()(({ open,data, onClose, withServiceApi, moduleList }) => {
    const [ form ] = Form.useForm();
    const { token } = theme.useToken();
    const [ ajaxLoading, setAjaxLoading ] = useState(false);
    const [ showFormState, setShowFormState ] = useState(true);
    const intl = useIntl();
    const app = App.useApp();
    const api = Api.useApi();
    const formStyle: React.CSSProperties = {
        maxWidth: 'none',
        // background: token.colorFillAlter,
        borderRadius: token.borderRadiusLG,
        padding: 24,
    };
    const onFinish = useCallback(() => {
        setAjaxLoading(true);
        form.validateFields().then((val: any) => {
            withServiceApi.send({
                endPoint: "setting.languageSubmit",
                data: {
                    ...form.getFieldsValue(),
                    id: data?.id
                }
            }).then(() => {
                setAjaxLoading(false);
                api.refreshI18n();
                onClose(true);
            }).catch((err) => {
                setAjaxLoading(false);
                app.message.error(err.message);
                form.resetFields();
            });
        }).catch((err) => {
            setAjaxLoading(false);
            console.error(err);
        })
        
    }, [data]);
    const defaultValues = useMemo(() => ({
        module: data?.module,
        name: data?.name,
        enGb: data?.en_gb,
        cnZh: data?.cn_zh
    }), [data])
    useEffect(() => {
        form.resetFields();
    }, [data,open]);
    console.log("-----", data, showFormState);
    return (<>
        <Modal open={open}
            title={<FormattedMessage id={data ? "admin.pages.language.modal.edit" : "admin.pages.language.modal.add"}/>}
            okText={<FormattedMessage id="admin.pages.form.submit"/>}
            cancelText={<FormattedMessage id="admin.layout.modal.cancel"/>}
            onCancel={()=>{
                form.resetFields();
                onClose();
            }}
            onOk={onFinish}
            okButtonProps={{
                loading: ajaxLoading
            }}
            cancelButtonProps={{
                disabled: ajaxLoading
            }}
            destroyOnClose
        >
            {showFormState && <Form
                form={form}
                name="advanced_search"
                style={formStyle}
                onFinish={onFinish}
                disabled={ajaxLoading}
                initialValues={defaultValues}
            >
                <Row>
                    <Col span={24}>
                        <Form.Item
                            label={<FormattedMessage id="system.module" />}
                            name="module"
                            rules={[{ required: true, message: '系统模块不能为空。' }]}
                            labelCol={{
                                span: 8
                            }}
                        >
                            <Select options={moduleList} placeholder={intl.formatMessage({
                                id: "admin.layout.select.placeholder"
                            })} />
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <Form.Item
                            label={<FormattedMessage id="admin.pages.language.name" />}
                            name="name"
                            rules={[{ required: true, message: '字段名不能为空。' }]}
                            labelCol={{
                                span: 8
                            }}
                        >
                            <Input type="text" placeholder={intl.formatMessage({
                                id: "admin.layout.input.placeholder"
                            })} />
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <Form.Item
                            label={<FormattedMessage id="admin.pages.language.english" />}
                            name="enGb"
                            labelCol={{
                                span: 8
                            }}
                        >
                            <Input type="text" placeholder={intl.formatMessage({
                                id: "admin.layout.input.placeholder"
                            })} />
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <Form.Item
                            label={<FormattedMessage id="admin.pages.language.chinese" />}
                            name="cnZh"
                            labelCol={{
                                span: 8
                            }}
                        >
                            <Input type="text" placeholder={intl.formatMessage({
                                id: "admin.layout.input.placeholder"
                            })} />
                        </Form.Item>
                    </Col>
                </Row>
            </Form>}
        </Modal>
    </>);
});